Conversation
Walkthrough템플스테이 상세 페이지와 관련된 API, 타입, 훅, 컴포넌트 전반에 걸쳐 v2 API 엔드포인트와 새로운 데이터 구조를 반영하도록 일괄적으로 수정되었습니다. 주요 변경사항은 string 기반 ID에서 number 기반 ID로의 전환, 필드명 및 타입 변경, prop 및 쿼리 파라미터 구조의 단순화 등입니다. Changes
Sequence Diagram(s)sequenceDiagram
participant Client
participant TempleDetailClient
participant API
Client->>TempleDetailClient: id 전달
TempleDetailClient->>API: GET /v2/api/templestay/details/{id}
API-->>TempleDetailClient: 상세 데이터 반환
TempleDetailClient-->>Client: 상세 정보 렌더링
Client->>TempleDetailClient: id 전달 (위시리스트 변경)
TempleDetailClient->>API: POST/DELETE /v2/api/templestay/wish/{id}
API-->>TempleDetailClient: 응답
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20분 Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(해당 PR의 모든 변경사항은 명시된 linked issue의 "템플스테이 상세페이지 api v2 전환"과 직접적으로 연관되어 있습니다. 범위를 벗어난 변경사항은 없습니다.) Possibly related PRs
Suggested reviewers
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
🪷 Storybook 확인 🪷 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🔭 Outside diff range comments (1)
src/apis/templeInfo/type.ts (1)
35-42: 템플스테이 ID 타입 일관성 검토 및 수정 필요
src/apis/templeInfo에서templestayId가string으로 정의되어 있는데,
src/apis/wish등 다른 API에서는number로 통일되어 있습니다. templeInfo 쪽도number로 변경해 주세요.수정이 필요한 위치:
- src/apis/templeInfo/type.ts
- templestayId: string; + templestayId: number;- src/apis/templeInfo/axios.ts
• getTempleReviews(templestayId: string, …) → (templestayId: number, …)
• axios.get params 타입도templestayId: number로 변경- src/apis/templeInfo/prefetch.ts & index.ts
• 함수 파라미터(templestayId: string, …)→(templestayId: number, …)
• queryKey 배열 요소 타입 반영
🧹 Nitpick comments (5)
src/components/templeDetail/templeTopbar/TempleTopbar.tsx (1)
10-10: 불필요한 템플릿 리터럴을 제거하세요.
templestayName만 사용하므로 템플릿 리터럴이 불필요합니다.- <PageName title={`${templestayName}`} /> + <PageName title={templestayName} />src/apis/templeInfo/index.ts (2)
7-11: 숫자 ID 매개변수에 대한 유효성 검사 추가 권장API v2 마이그레이션으로 문자열에서 숫자 ID로 변경되었는데, 유효하지 않은 숫자가 전달될 경우를 대비한 유효성 검사를 추가하는 것이 좋겠습니다.
export const useGetTempleDetails = (id: number) => { + if (!Number.isInteger(id) || id <= 0) { + throw new Error('Invalid temple ID: must be a positive integer'); + } + const { data, isLoading, isError } = useQuery({ queryKey: ['detailPage', id], queryFn: () => getTempleDetails(id), select: (res: ApiResponse<TempleDetail>) => res.data, }); return { data, isLoading, isError }; };
17-21: 이미지 API 훅에도 동일한 유효성 검사 적용템플 상세 정보와 마찬가지로 이미지 API에서도 숫자 ID 유효성 검사가 필요합니다.
export const useGetTempleImages = (id: number) => { + if (!Number.isInteger(id) || id <= 0) { + throw new Error('Invalid temple ID: must be a positive integer'); + } + const { data, isLoading, isError } = useQuery({ queryKey: ['images', id], queryFn: () => getTempleImages(id), select: (res: ApiResponse<TemplestayImgsResponse>) => res.data, }); return { data, isLoading, isError }; };src/app/detail/[templestayId]/photo/TempleImagesClient.tsx (2)
9-11: 인터페이스 이름을 컴포넌트 목적에 맞게 수정하세요.
TemplePhotoPageProps인터페이스 이름이 컴포넌트의 실제 목적과 일치하지 않습니다. 이 컴포넌트는 페이지가 아닌 클라이언트 컴포넌트입니다.-interface TemplePhotoPageProps { +interface TempleImageClientProps { templestayId: number; }-const TempleImageClient = ({ templestayId }: TemplePhotoPageProps) => { +const TempleImageClient = ({ templestayId }: TempleImageClientProps) => {
24-26: 빈 상태 메시지를 한국어로 통일하세요.다른 UI 요소들은 한국어를 사용하는데 빈 상태 메시지만 영어로 되어 있어 일관성이 떨어집니다.
- return <p>No temple images available</p>; + return <p>사진이 없습니다</p>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
src/apis/response.ts(1 hunks)src/apis/templeInfo/axios.ts(1 hunks)src/apis/templeInfo/index.ts(1 hunks)src/apis/templeInfo/prefetch.ts(1 hunks)src/apis/templeInfo/type.ts(1 hunks)src/app/detail/[templestayId]/TempleDetailClient.tsx(5 hunks)src/app/detail/[templestayId]/page.tsx(1 hunks)src/app/detail/[templestayId]/photo/TempleImagesClient.tsx(1 hunks)src/app/detail/[templestayId]/photo/page.tsx(1 hunks)src/components/carousel/detailCarousel/DetailCarousel.tsx(2 hunks)src/components/templeDetail/templeInfo/templeInfo.tsx(1 hunks)src/components/templeDetail/templePrice/TemplePrice.tsx(1 hunks)src/components/templeDetail/templeTitle/TempleTitle.tsx(1 hunks)src/components/templeDetail/templeTopbar/TempleTopbar.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
src/apis/templeInfo/prefetch.ts (2)
src/apis/templeInfo/type.ts (2)
TempleDetail(1-14)TemplestayImgsResponse(20-23)src/apis/templeInfo/axios.ts (2)
getTempleDetails(3-6)getTempleImages(8-11)
src/apis/templeInfo/index.ts (3)
src/apis/templeInfo/axios.ts (2)
getTempleDetails(3-6)getTempleImages(8-11)src/apis/response.ts (1)
ApiResponse(1-5)src/apis/templeInfo/type.ts (2)
TempleDetail(1-14)TemplestayImgsResponse(20-23)
src/app/detail/[templestayId]/photo/TempleImagesClient.tsx (1)
src/apis/templeInfo/index.ts (1)
useGetTempleImages(17-25)
src/apis/templeInfo/type.ts (1)
src/apis/ranking/type.ts (1)
Temple(3-11)
🔇 Additional comments (21)
src/components/templeDetail/templeTitle/TempleTitle.tsx (2)
8-8: tag 프로퍼티 제거로 인한 UI 단순화가 적절합니다.
tag프로퍼티를 제거하고 단일templeName해시태그로 변경한 것은 V2 API 구조 변경에 맞는 적절한 단순화입니다.
15-15: 제목 표시 로직 변경이 의도에 맞는지 확인하세요.이전에는
templeName과templestayName을 함께 표시했지만, 이제는templestayName만 표시합니다. 이 변경이 UX 요구사항과 일치하는지 확인이 필요합니다.src/components/carousel/detailCarousel/DetailCarousel.tsx (3)
14-14: API 파라미터 타입 변경이 적절합니다.
templestayId를 문자열에서 숫자로 변환하여 전달하는 것은 V2 API 스펙에 맞는 올바른 변경입니다.
17-17: 데이터 구조 변경에 맞는 적절한 수정입니다.
data?.total에서data?.imgUrls.length로 변경한 것은 V2 API 응답 구조 변경에 따른 올바른 수정입니다.
46-54: 리뷰 코멘트 불필요 – 현재 코드가 API 스펙과 일치합니다
TemplestayImg인터페이스에는 이미지별 고유 ID 필드가 없으므로,index를 key로 사용하는 것이 유일한 방법입니다.imgurl속성명은 API 정의(export interface TemplestayImg { imgurl: string; })에 맞춰 사용되고 있어 일관성에 문제가 없습니다.위 사항을 감안하면 기존 리뷰에서 제기된 변경은 불필요합니다.
Likely an incorrect or invalid review comment.
src/components/templeDetail/templeTopbar/TempleTopbar.tsx (1)
7-7: 템플스테이명만 사용하도록 단순화된 것이 적절합니다.
templeName프로퍼티를 제거하고templestayName만 사용하는 것은 전체적인 데이터 모델 단순화와 일치하는 올바른 변경입니다.src/apis/templeInfo/prefetch.ts (2)
6-10: LGTM! 일관된 API v2 마이그레이션프리페치 쿼리 옵션이 API v2 사양에 맞게 잘 업데이트되었습니다. 숫자 ID 사용과 쿼리 키 단순화가 적절합니다.
12-16: 이미지 쿼리 옵션도 올바르게 업데이트됨템플 이미지 쿼리 옵션이 새로운 API 구조에 맞게 적절히 변경되었습니다.
src/apis/templeInfo/axios.ts (3)
3-6: LGTM! RESTful API 설계로 개선됨API v2 엔드포인트가 경로 매개변수를 사용하는 RESTful 설계로 잘 변경되었습니다. 쿼리 매개변수 방식보다 더 직관적이고 표준적인 접근 방식입니다.
8-11: 이미지 API도 일관되게 업데이트됨템플 이미지 API도 동일한 v2 패턴을 따라 적절히 업데이트되었습니다.
13-18: 리뷰 API v2 마이그레이션 여부 확인 요청
파일:
src/apis/templeInfo/axios.ts(Lines 13–18)
getTempleReviews 함수에서 여전히'/public/templestay/reviews'(v1) 엔드포인트를 사용 중입니다.상세 정보·이미지 API는 이미 v2로 마이그레이션된 상태이므로, 리뷰 API도 v2 엔드포인트 제공 계획이 있는지 확인 부탁드립니다.
(코드베이스에서/v2/.../reviews또는 유사한 경로 사용 흔적이 없습니다.)src/app/detail/[templestayId]/photo/TempleImagesClient.tsx (1)
34-43: 이미지 렌더링 구현이 적절합니다.Next.js Image 컴포넌트를 사용하여 최적화된 이미지 로딩을 구현했고,
imgurl을 key로 사용하여 고유성을 보장했습니다. 고정된 크기(162x162)와 적절한 alt 텍스트도 제공되어 있습니다.src/app/detail/[templestayId]/photo/page.tsx (1)
9-13: 페이지 컴포넌트 리팩토링이 잘 구현되었습니다.페이지 컴포넌트에서 데이터 페칭과 렌더링 로직을
TempleImageClient로 적절히 분리했습니다. 문자열 ID를 숫자로 변환하여 v2 API 스펙에 맞게 전달하는 것도 올바릅니다.src/app/detail/[templestayId]/TempleDetailClient.tsx (6)
31-35: API v2 전환에 맞는 적절한 prop 타입 변경입니다.
templestayId: string에서id: number로 변경하여 v2 API 스펙에 맞게 올바르게 업데이트되었습니다.
39-41: 변수명 변경으로 코드 가독성이 향상되었습니다.기존
id변수를user로 변경하여 사용자 ID와 템플스테이 ID 간의 혼동을 방지했습니다. 이는 prop으로 받는id와의 네이밍 충돌을 해결하는 좋은 개선사항입니다.
133-134: 컴포넌트 prop 업데이트가 적절합니다.
TempleTitle과TempleDetailInfo컴포넌트에 전달되는 prop들이 새로운 데이터 구조에 맞게 올바르게 업데이트되었습니다.phone으로 필드명이 변경된 것도 반영되어 있습니다.
147-147: 지도 컴포넌트 prop 업데이트가 올바릅니다.지리적 좌표가
latitude/longitude에서lat/lon으로 변경된 것에 맞게SmallMap컴포넌트의 prop도 적절히 업데이트되었습니다.
128-128: TempleTopbarProps에 templestayName이 정의되어 있습니다.
TempleTopbar 컴포넌트의 인터페이스(TempleTopbarProps)에서 이미 templestayName: string으로 선언되어 있어,<TempleTopbar templestayName={data.templestayName} />로 전달된 값이 정상적으로 수용됩니다. 추가 수정이 필요 없습니다.
143-143: TemplePriceProps의 prop 이름 일치 확인됨
검토 결과,TemplePrice.tsx의 props 인터페이스에templestayPrice?: number로 정의되어 있으므로
현재templestayPrice={data.price}로 전달하는 방식이 올바릅니다.
- 만약 prop 이름을
price로 단순화하려면
•TemplePriceProps인터페이스의 키를templestayPrice→price로 변경
• 컴포넌트 내부와 이 파일(src/app/detail/[templestayId]/TempleDetailClient.tsx)의 사용 부분을 모두 함께 리팩터링해야 합니다.지금 상태에서는 추가 수정 없이 정상 동작하므로 이대로 유지해도 문제가 없습니다.
src/apis/templeInfo/type.ts (2)
1-14: TempleDetail 인터페이스가 v2 API에 맞게 잘 업데이트되었습니다.API v2 스펙에 맞춰 다음과 같은 적절한 변경사항들이 적용되었습니다:
- ID 타입을
string에서number로 변경- 필드명 정규화:
phoneNumber→phone,liked→wish- 지리적 좌표 간소화:
latitude/longitude→lat/lon- 필수 필드로 변경:
schedule,introduction- 새로운
price필드 추가
16-23: 이미지 관련 인터페이스 단순화가 적절합니다.
TemplestayImg에서 불필요한imageUrlId제거와imgUrl→imgurl필드명 변경, 그리고TemplestayImgsResponse의 구조 단순화가 v2 API 응답 구조에 맞게 잘 반영되었습니다.
maylh
left a comment
maylh
left a comment
There was a problem hiding this comment.
이름이 null로 오는 템플스테이가 있어요. 이 경우 어떡할건지 디자인, 서버 파트와 의논이 필요해 보입니다 !
(크롤링 후 DB에서 거르던지, 클라에서 별도로 처리하던지 ..?)
고생하셨어용 👍
| useEffect(() => { | ||
| const id = getCookie('userId') as string; | ||
| setUserId(id); | ||
| const user = getCookie('userId') as string; |
There was a problem hiding this comment.
쿠키에 userId 없어져서 로그인 여부 판단하기 위해 쿠키값 가져오는거면 토큰 유무로 판단해야 할 것 같습니뎅
There was a problem hiding this comment.
user가 해당 컴포넌트 토글 및 위시 부분과만 연관되어 있어서, 영경님 작업과 겹칠 것 같아요. 추후에 영경님 브랜치에서 위시 API 전환 작업하실 때 같이 진행해 주시면 될 것 같습니다. @bykbyk0401 부탁드립니다!!
3 participants
🛰️ 관련 이슈
🧑💻 작업 내용
🗯️ PR 포인트
🚀 알게된 점
📖 참고 자료 (선택)
📸 스크린샷 (선택)
Summary by CodeRabbit
신규 기능
버그 수정
리팩터링
스타일